<!--
 * @描述信息:  页面底部的tabar
 * @Author:   zls
-->
<template>
  <ul class="foot">
    <router-link v-for="(item, i) in list" :key="i" :to="item.path" custom v-slot="{ navigate, isActive }">
      <li :class="[isActive && 'router-link-active']" @click="navigate">
        <z-svg :name="isActive ? item.svgY : item.svgN"></z-svg>
        <span>{{ item.name }}</span>
      </li>
    </router-link>
  </ul>
</template>

<script setup>
import { reactive } from 'vue'
const list = reactive([
  { name: '主页', path: '/home', svgY: 'xuanzhong', svgN: 'daifukuan1' },
  { name: '列表页', path: '/list', svgY: 'xuanzhong', svgN: 'fenlei' },
  { name: '我的', path: '/mine', svgY: 'xuanzhong', svgN: 'touxiang' }
])
</script>

<style lang="scss" scoped>
.foot {
  @include flex(center, space-around);
  border-top: 1px solid $border;
  background-color: $border;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  // height: calc(50px + constant(safe-area-inset-bottom));
  // height: calc(50px + env(safe-area-inset-bottom));
  li {
    @include flex(center, center, column);
    color: $color4;
    > svg {
      font-size: 20px;
      margin-bottom: 5px;
    }
    &.router-link-active {
      span {
        color: $color1;
      }
    }
  }
}
</style>
